<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动管理</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <link href="/html/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="/html/css/base.css">
</head>
<body>
<div class="activity personalActivity" id="personHeight">
    <div class="title" style="background:white;">
        <ul class="news-title">
            <li class="title-item active"><a href="javascript:;">活动列表</a></li>
            <li class="title-item"><a href="javascript:;">活动公示申报</a></li>

        </ul>
    </div>
    <div class="title">
        <form class="layui-form act-sel" action="">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="title" required  lay-verify="required" placeholder="根据活动名查询" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo"><i class="layui-icon layui-icon-search"></i></button>
                </div>
            </div>
        </form>
        <button type="button" class="layui-btn" style="margin-left: 790px;background-color: #ae1c1d;margin-top: -60px"><img src="/html/img/tj.png" class="tjImg">申请活动</button>
        <div style="clear: both;"></div>
    </div>


    <div class="box-cont">
        <div class="act-forenotice">

            <div class="activeBlock">
                <div class="activeTop">
                    <div class="leftTop">
                        <img src="/html/img/bqImg.png" >
                        <text class="bqImg">1</text>
                    </div>
                    <div class="middleTop">
                        阳光海岸 进社区 活动
                    </div>
                    <div class="rightTop">已结束</div>
                    <div style="clear: both;"></div>
                </div>
                <div class="activeDate">
                    <i class="layui-icon layui-icon-log"></i>
                    <text class="textSty">2019/10/12 12:00:00</text>
                    <i class="layui-icon layui-icon-location"></i>
                    <text class="textSty">山东省日照市阳光海岸社区</text>
                </div>
                <div>
                    <div class="xxsm">
                        详细说明：根据实际情况组织他们开展一次逃生疏散演练，举办一场消防知识讲座，设计一个消防互动游戏。根据受众实际情况，设计不同教育内容。
                    </div>
                    <div class="djxq" data-type="zk">
                        <i class="layui-icon layui-icon-triangle-r"></i>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>


            <div class="activeBlock">
                <div class="activeTop">
                    <div class="leftTop">
                        <img src="/html/img/bqImg.png" >
                        <text class="bqImg">5</text>
                    </div>
                    <div class="middleTop">
                        山海天阳光海岸
                    </div>
                    <div class="rightTop">已结束</div>
                    <div style="clear: both;"></div>
                </div>
                <div class="activeDate">
                    <i class="layui-icon layui-icon-log"></i>
                    <text class="textSty">2019/10/12 12:00:00</text>
                    <i class="layui-icon layui-icon-location"></i>
                    <text class="textSty">	山海天</text>
                </div>
                <div>
                    <div class="xxsm">
                        流动收集景区垃圾，清理维护环境卫生。
                    </div>
                    <div class="djxq" data-type="zk">
                        <i class="layui-icon layui-icon-triangle-r"></i>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>


            <div class="activeBlock">
                <div class="activeTop">
                    <div class="leftTop">
                        <img src="/html/img/bqImg.png" >
                        <text class="bqImg">8</text>
                    </div>
                    <div class="middleTop">
                        日照市公安消防支队 进社区 活动情况通知
                    </div>
                    <div class="rightTop">已结束</div>
                    <div style="clear: both;"></div>
                </div>
                <div class="activeDate">
                    <i class="layui-icon layui-icon-log"></i>
                    <text class="textSty">2019/10/12 12:00:00</text>
                    <i class="layui-icon layui-icon-location"></i>
                    <text class="textSty">日照市公安消防支队</text>
                </div>
                <div>
                    <div class="xxsm">
                        消防咨询
                    </div>
                    <div class="djxq" data-type="zk">
                        <i class="layui-icon layui-icon-triangle-r"></i>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
        </div>

        <div class="act-forenotice hidden">
            <div class="activeBlock">
                <div class="activeTop">
                    <div class="leftTop">
                        <img src="/html/img/bqImg.png" >
                        <text class="bqImg">1</text>
                    </div>
                    <div class="middleTop">
                        阳光海岸 进社区 活动
                    </div>
                    <div class="rightTop">已结束</div>
                    <div style="clear: both;"></div>
                </div>
                <div class="activeDate">
                    <i class="layui-icon layui-icon-log"></i>
                    <text class="textSty">2019/10/12 12:00:00</text>
                    <i class="layui-icon layui-icon-location"></i>
                    <text class="textSty">山东省日照市阳光海岸社区</text>
                </div>
                <div>
                    <div class="xxsm">

                    </div>
                    <div class="djxq" data-type="zk">
                        <i class="layui-icon layui-icon-triangle-r"></i>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
        </div>
        <div id="listOne"></div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
<script type="text/javascript" src="/html/js/TweenMax.min.js"></script>
<script type="text/javascript" src="/html/layui/layui.js"></script>
<script type="text/javascript" src="/html/js/base.js"></script>
<script>
    $(function () {
        //上面按钮点击事件
        $('#personHeight .title-item').hover(function(e){
            e.preventDefault();
            var _index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('#personHeight .box-cont .act-forenotice').eq(_index).removeClass("hidden").siblings().addClass("hidden");
            var height_con = $('#personHeight .box-cont .act-forenotice').eq(_index).height()+45;
            $(".personalRight", parent.document).height(height_con);
        });
        $(".djxq").off("click").on("click",function(e){
            var typell = $(this).data("type");
            if(typell == 'zk'){
                var previousSbiling = $(this).prev().css({overflow:"inherit",height:"auto"});
                $(this).data("type","gb");
                $(this).find("i").removeClass("layui-icon-triangle-r").addClass("layui-icon-triangle-d");
            }else if(typell == 'gb'){
                var previousSbiling = $(this).prev().css({overflow:"hidden",height:"27px"});
                $(this).data("type","zk");
                $(this).find("i").removeClass("layui-icon-triangle-d").addClass("layui-icon-triangle-r");
            }
            var height_con = $('#personHeight').height()+30;
            $(".personalRight", parent.document).height(height_con);
        });
    });
    //layui
    layui.use(['form','laydate','laypage','layer'], function(){
        var form = layui.form
            ,laydate = layui.laydate
            ,laypage = layui.laypage
            , layer = layui.layer;
        //时间选择
        laydate.render({
            elem: '#date'
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //分页
        laypage.render({
            elem: 'listOne'
            ,count: 100
            ,layout: ['prev', 'page', 'next', 'skip' ,'count']
            ,prev: '<em>←</em>'
            ,next: '<em>→</em>'
            ,jump: function(obj){
                console.log(obj)
            }
        });
    });
</script>
</html>